<template>
  <!-- 总容器 -->
  <div class="wrapper">
    <!-- 头部 -->
    <header>
      <img src="../assets/bgtop.png">
    </header>

    <!-- 标题 -->
    <h1>东软环保公众监督系统</h1>
    <div class="title">
      <p></p>
      <p>公众监督员端</p>
      <p></p>
    </div>

    <!-- 登录表单 -->
    <section>
      <div class="input-box">
        <i class="fa fa-user-o"></i>
        <input type="text" placeholder="输入手机号" v-model="supervisorForm.telId">
      </div>
      <div class="input-box">
        <i class="fa fa-lock"></i>
        <input type="password" placeholder="输入登录密码" v-model="supervisorForm.password">
      </div>
      <div class="reg-box">
        <p @click="toRegister" >注册</p>
        <p>忘记密码?</p>
      </div>
      <div class="button-box" @click="login" >登录</div>
    </section>
  </div>
</template>

<script setup>
import {reactive} from "vue";
import {useRouter} from "vue-router";
import {setSessionStorage} from "@/common";
import {loginApi} from "@/axios/api/OthersApi";
import 'element-plus/dist/index.css'
import { ElMessage } from "element-plus";
const  router=useRouter();
const supervisorForm=reactive({
  telId:'',
  password:''
})
const toRegister=function () {
  router.push('/register')
}
const login = function () {
  //表单验证
  if(supervisorForm.telId===''){
    ElMessage.error("电话号码不能为空");
    return;
  }
  //验证电话号格式
  var uPatternPhone = /^1[3456789]\d{9}$/;
  if(!uPatternPhone.test(supervisorForm.telId)){
    console.log(supervisorForm.telId);
    ElMessage.error("电话号码格式不正确");
    return;
  }
  //验证密码
  if(supervisorForm.password===''){
    ElMessage.error("密码不能为空");
    return;
  }
  //验证密码格式
  let uPatternPwd =/^[A-Za-z0-9]{6,12}$/;
  if(!uPatternPwd.test(supervisorForm.password)){
    ElMessage.error("密码格式不正确");
    return;
  }
  //电话号与密码均正确，开始发起请求
  const url = "/supervisor/getSupervisorByIdByPass"
  loginApi(supervisorForm)
      .then((response)=>{
        /*//服务器返回错误数据
        if(response.code!==200){
          //错误
          return;
        }*/
        //处理正常业务逻辑
        //main.js中查看key-value
        setSessionStorage('supervisor',response.result);
        setSessionStorage('token',response.result.token)
        //路由跳转
        router.push('/selectGrid');
      }).catch((err)=>console.log(err))
}
</script>
<style scoped>
/************************* 总容器 ***********************/
.wrapper{
  width: 100%;
  height: 100%;
  background-color: #CFE8E9;
}

  /************************* header ***********************/
header{
  width: 100%;
}
header img{
  display: block;
  width: 100%;
}

  /************************* 标题 ***********************/
h1{
  text-align: center;
  color: #46a34f;
  font-size: 7vw;
  font-weight: 700;
}
.title{
  width: 70%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #46a34f;
  font-size: 4vw;
  margin-top: 3vw;
  margin-bottom: 6vw;
}
.title p:first-child,.title p:last-child{
  width: 20vw;
  height: 1px;
  background-color: #68C56F;
}

  /************************* 登录表单 ***********************/
section{
  width: 86vw;
  margin: 0 auto;
  background-color: #FFF;
  border-radius: 2.4vw;

  box-sizing: border-box;
  padding: 1vw 6vw 5vw;
}
section .input-box{
  width: 100%;
  height: 12vw;
  border: solid 1px #CCC;
  border-radius: 2vw;
  margin-top: 5vw;

  display: flex;
  align-items: center;
}
section .input-box i{
  margin: 0 3.6vw;
  font-size: 5.4vw;
  color: #CCC;
}
section .input-box input{
  border: none;
  outline: none;
}
section .reg-box{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 5vw;
  margin-bottom: 2vw;
}
section .reg-box p{
  font-size: 3.3vw;
  color: #2D727E;
  user-select: none;
}
section .button-box{
  width: 100%;
  height: 13vw;
  border-radius: 2vw;
  background-color: #70B0BC;

  color: #FFF;
  text-align: center;
  line-height: 13vw;
  font-size: 4.6vw;
  letter-spacing: 1vw;
  user-select: none;
}
</style>